<template>
    <div style="margin-top: 15px;" id="app">
        <el-input  placeholder="请输入内容" v-model="input4" class="input-with-select">
            <el-select v-model="select" slot="prepend" placeholder="请选择">
                <el-option label="编号" value="1"></el-option>
                <el-option label="任务名称" value="2"></el-option>
                <el-option label="任务状态" value="3"></el-option>
            </el-select>
            <el-button slot="append" icon="el-icon-search" v-on:click="taskFind(input4)" >查询</el-button>
        </el-input>
        <el-table
                v-loading="loading"
                :data="tableData"
                @selection-change="handleSelectionChange"
                style="width: 100%">
            <el-table-column type="expand">
                <template slot-scope="props">
                    <el-form label-position="left" inline class="demo-table-expand">
                        <el-form-item label="任务编号：">
                            <span>{{ props.row.id }}</span>
                        </el-form-item>
                        <el-form-item label="任务名称：">
                            <span>{{ props.row.name }}</span>
                        </el-form-item>
                        <el-form-item label="任务介绍：">
                            <span>{{ props.row.message }}</span>
                        </el-form-item>
                        <el-form-item label="结束日期：">
                            <span>{{ props.row.date }}</span>
                        </el-form-item>
                        <el-form-item label="业绩：">
                            <span>{{ props.row.profit }}</span>
                        </el-form-item>
                        <el-form-item label="任务状态：">
                            <span>{{ props.row.status }}</span>
                        </el-form-item>
                    </el-form>
                </template>
            </el-table-column>
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    prop="id"
                    label="编号"
                    width="200">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="任务名称"
                    width="200">
            </el-table-column>
            <el-table-column
                    prop="profit"
                    label="业绩"
                    width="200">
            </el-table-column>
            <el-table-column
                    prop="status"
                    label="任务状态"
                    width="200">
            </el-table-column>
            <el-table-column align="right" width="120">
                <template slot="header">
                    <el-button type="primary"  size="mini" @click="taskList=true,getTasks()" plain>查看我的任务</el-button>
                </template>
                <template slot-scope="scope">
                    <el-button size="mini" type="primary" plain @click="getTask(scope.row)" v-if="scope.row.status=='未领取'">领取</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                style="margin: 15px 0px;"
                prev-text="上一页" next-text="下一页" background
                layout="prev, pager, next, sizes, jumper, total"
                :page-sizes="[5,10,20,40]"
                :page-size="pageSize"
                :total="total"
                :current-page="pageNow"
                @current-change="findPage"
                @size-change="findSize">
        </el-pagination>
        <el-dialog title="任务列表" :visible.sync="taskList" width="90%">
            <el-table
                    v-loading="loading"
                    :data="tasks"
                    @selection-change="handleSelectionChange"
                    style="width: 100%">
                <el-table-column type="expand">
                    <template slot-scope="props">
                        <el-form label-position="left" inline class="demo-table-expand">
                            <el-form-item label="任务编号：">
                                <span>{{ props.row.id }}</span>
                            </el-form-item>
                            <el-form-item label="任务名称：">
                                <span>{{ props.row.name }}</span>
                            </el-form-item>
                            <el-form-item label="任务介绍：">
                                <span>{{ props.row.message }}</span>
                            </el-form-item>
                            <el-form-item label="结束日期：">
                                <span>{{ props.row.date }}</span>
                            </el-form-item>
                            <el-form-item label="业绩：">
                                <span>{{ props.row.profit }}</span>
                            </el-form-item>
                            <el-form-item label="任务状态：">
                                <span>{{ props.row.status }}</span>
                            </el-form-item>
                        </el-form>
                    </template>
                </el-table-column>
                <el-table-column
                        type="selection"
                        width="55">
                </el-table-column>
                <el-table-column
                        prop="id"
                        label="编号"
                        width="200">
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="任务名称"
                        width="200">
                </el-table-column>
                <el-table-column
                        prop="profit"
                        label="业绩"
                        width="200">
                </el-table-column>
                <el-table-column
                        prop="status"
                        label="任务状态"
                        width="200">
                </el-table-column>
                <el-table-column align="right" width="120">
                    <template slot-scope="scope">
                        <el-button size="mini" type="primary" plain @click="finishTask(scope.row)" v-if="scope.row.status=='已领取'">完成</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <span slot="footer" class="dialog-footer">
                    <el-button @click="taskList = false">确定</el-button>
                  </span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        methods:{
            getTask(row){
                this.$confirm('确认领取', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    row.w_id = window.sessionStorage.getItem('UserId')
                    row.status = "已领取"
                    this.$http.post("task/update",row).then(function(resp){
                        if(resp.code==2000){
                            this.$message({
                                    type: 'success',
                                    message: '领取成功!'
                                }
                            );
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消'
                    });
                });
            },
            finishTask(row){
                this.$confirm('确认完成', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {


                    row.w_id = window.sessionStorage.getItem('UserId')
                    row.status = "已完成"
                    this.$http.post("task/update",row).then(function(resp){
                        if(resp.code==2000){
                            this.$message({
                                    type: 'success',
                                    message: '记录成功!'
                                }
                            );
                            location.reload();
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消'
                    });
                });
            },
            findPage(page){
                console.log("当前页数："+page);
                this.pageNow=page;
                this.findAllTableDataByPage();
            },
            findSize(size){
                console.log("当前页面记录条数："+size);
                this.pageSize=size;
                this.findAllTableDataByPage();
            },
            findAllTableDataByPage(){
                this.$http.get("task/findByPage?pageNow="+this.pageNow+ "&pageSize=" + this.pageSize).then((res)=>{
                    this.tableData=res.data.salaries;
                    this.total=res.data.total;
                });
            },
            handleSelectionChange(val){
                console.log("handleSelectionChange--",val)
                this.tableChecked=val
            },
            getTasks(){
                const _this = this
                this.$http.post("task/findOne", window.sessionStorage.getItem("UserId")).then(function (resp) {
                    _this.tasks= resp.data.data
                    console.log( _this.tasks)
                })
            },
            taskFind(input){
                const _this = this
                if(input!==null&&input!==''&&this.select=="1"){
                    this.$http.post("task/findOne",input).then(function(resp){
                        console.log(resp.data.data);
                        _this.tableData=resp.data.data
                    })
                }else if(input!==null&&input!==''&&this.select=="2"){
                    this.$http.post("task/findByName",input).then(function(resp){
                        console.log(resp.data);
                        _this.tableData=resp.data.data
                    })
                }else if(input!==null&&input!==''&&this.select=="3") {
                    this.$http.post("task/findByStatus", input).then(function (resp) {
                        console.log(resp.data);
                        _this.tableData = resp.data.data
                    })
                }else{
                    this.findAllTableDataByPage()
                }
            },
        },
        data() {
            return {
                total:0,//总页数，从后台查询
                pageNow:1,//当前页数，默认为1
                pageSize:20,//当前页显示的数据条数，默认为20
                loading: false,
                profit:[
                    {
                        date:'',
                        profit:'',
                        name:'',
                        w_id:'',
                    }
                ],
                input1: '编号',
                input2: '任务名称',
                input3: '任务状态',
                input4: '',
                select: '请选择',
                tableData: null,
                taskList:false,
                tasks:null,
            }
        },
        created(){
             const _this = this
            // //const _this = this
            // var time = new Date()
            // let a = (String)(time.getFullYear())+'-'+(String)(time.getMonth()+1)
            // console.log(a)
            // _this.profit.date = a
            // _this.profit.profit = "1"
            // _this.profit.w_id  = window.sessionStorage.getItem('UserId')
            // _this.$http.post("profit/findLastId").then(function(resp){
            //     this.profit.w_id=resp.data.data+1
            // })
            // _this.$http.post("profit/save",_this.profit)

            _this.findAllTableDataByPage()

        }
    }
</script>

<style>
    .demo-table-expand {
        font-size: 0;
    }
    .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }
    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 100%;
    }
    .el-select .el-input {
        width: 130px;
    }
    .input-with-select .el-input-group__prepend {
        background-color: #fff;
    }
    .page{
        float: right;
    }
</style>